import { Form, Input, Button, Radio, Checkbox, Row, Col } from 'antd';
import { useEffect, useState } from 'react';
import useStore from '@/context/useStore';
import { LoginUser } from '@/services/index'
import './login.css';
import { observer } from 'mobx-react-lite';
import { IRouteComponentProps } from 'umi';
import { removeCookie } from '@/utils/auth';

const LoginPage: React.FC<IRouteComponentProps> = ({ location, history }) => {

    let { login } = useStore();

    useEffect(() => {
        console.log('useEffect.....');
        removeCookie();
        login.getViewIfy();

    }, [])

    async function onFinish(values: any) {
        console.log(values);

        let result = await login.loginEvent(values.username, values.password, values.verify, values['radio-group'], login.Verify.uuid);
        console.log(result);

        // 成功
        if (result) {
            // console.log(location.query.redirect);
            if (location.query.redirect) {
                // history.replace(decodeURIComponent(location.query.redirect as any));
                history.replace('/teachers/postSkill');
            } else {
                // history.replcae('/teachers/postSkill');
                console.log(312);
                // console.log(history);
                history.replace('/teachers/postSkill');

            }
        }
    };

    function onFinishFailed(errorInfo: any) {
        console.log('Failed:', errorInfo);
    };

    async function GetVerify() {
        console.log('GetVerify...');
        login.getViewIfy();
    }




    return <div className='Login'>
        <div className="form">
            <h1>八维生产性实训平台</h1>
            <Form
                name="basic"
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Form.Item
                    label="账号"
                    name="username"
                    rules={[{ required: true, message: '账号' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    rules={[{ required: true, message: '密码' }]}
                >
                    <Input.Password />
                </Form.Item>

                <div className="form_children">
                    <Form.Item
                        label="验证码"
                        name="verify"
                        rules={[{ required: true, message: '验证码' }]}
                    >
                        <Input />
                    </Form.Item>
                    <div onClick={() => { GetVerify() }} >
                        <img src={`data:image/png;base64,${login.Verify.img}`} alt="" />
                    </div>
                    {

                    }
                </div>

                <div className="form_children_check">
                    <Form.Item name="checkbox-group" label="">
                        <Checkbox.Group>
                            <Col span={8}>
                                <Checkbox value="A" style={{ width: '100px' }}>
                                    记住密码
                                </Checkbox>
                            </Col>
                        </Checkbox.Group>
                    </Form.Item>

                    <Form.Item name="radio-group" label="">
                        <Radio.Group>
                            <Radio value="student">学生</Radio>
                            <Radio value="teacher">老师</Radio>
                        </Radio.Group>
                    </Form.Item>
                </div>

                <Form.Item >
                    <Button type="primary" htmlType="submit">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    </div>
}

export default observer(LoginPage)